<script setup>

import {inject, nextTick, onMounted, ref} from "vue";
import ChatService from "@/service/impl/ChatService.js";

const message = inject('message')
const props = defineProps({
    modelId: {
        type: Number,
        default: null
    }
})
const data = ref({
    id: null,
    modelId: null,
    name: null,
    content: []
})
const msg = ref('')
const emit = defineEmits(['onTitleRefresh'])
const loding = ref(false)

const onSelect = (item) => {
    // 执行查询
    loding.value = true
    ChatService.modeContentInfo(item).then(res => {
        data.value = res.data
        loding.value = false
        nextTick(() => {
            let chatContent = document.getElementById("chat-content");
            chatContent.scrollTop = chatContent.scrollHeight;
        })
    }).catch(e => {
        loding.value = false
    })
}
const handleInput = (event) => {
    msg.value = event.target.innerText;
}
const onClear = (item,all) => {
    if(item.id === data.value.id){
        onBuildChat()
    }
    if(all){
        onBuildChat()
    }
}
const onSend = () => {
    let id = data.value.modelId ? data.value.modelId : props.modelId
    if(!id){
        message.warning("请选择模式")
        return
    }
    if(msg.value === null || msg.value.trim() === ''){
        return;
    }
    ChatService.modeContentEdit({
        modelId: id,
        message: msg.value,
        contentId: data.value.id
    }).then(res => {
        let m = msg.value
        msg.value = ''
        let content = document.getElementById("content")
        content.innerText = ''
        if(data.value.id === null) {
            emit('onTitleRefresh',res.data)
        }
        data.value = res.data
        let answer = ref({
            role: 'system',
            content: ''
        })
        data.value.content.push(answer.value)
        ChatService.question({
            modelId: id,
            message: m,
            contentId: res.data.id
        },(data) => {
            answer.value.content += data
        },(tag) => {
            // console.log(tag)
        })
    }).catch(e => {

    })
}

const onBuildChat = () =>{
    data.value = {
        id: null,
        modelId: null,
        name: null,
        content: []
    }
}

defineExpose({
    onSelect,onClear,
})

onMounted(() => {
    const content = document.getElementById('content');
    content.addEventListener('paste', function (e) {
        e.preventDefault();
        const text = (e.clipboardData || window.clipboardData).getData('text/plain');
        const range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        const textNode = document.createTextNode(text);
        range.insertNode(textNode);
        range.setStartAfter(textNode);
        msg.value = text;
    });
})

</script>

<template>
<el-row class="chat">
    <el-row id="chat-content" class="chat-top" v-loading="loding">
        <template v-for="item in data.content">
            <el-row class="chat-me" v-if="item.role === 'user'">
                <div class="chat-me-div chat-bubble received">{{(item.content)}}</div>
            </el-row>
            <el-row class="chat-ai" v-if="item.role === 'system'">
                <Markdown  class="chat-ai-mk chat-bubble sent" :source="item.content ? item.content : '请等待...' " />
            </el-row>
        </template>
    </el-row>
    <el-row class="chat-bottom">
        <div @input="handleInput" id="content" class="chat-input" contenteditable="true" />
        <el-row class="chat-tool">
            <el-button type="primary" @click="onSend">发送</el-button>
            <el-button type="primary" @click="onBuildChat">新建对话</el-button>
        </el-row>
        <span
            class="placeholder"
            :class="{ 'hidden': msg && msg.trim() }"
        >请输入对话内容。</span>
    </el-row>
</el-row>
</template>

<style scoped lang="scss">
.chat{
    height: 100%;
    width: 100%;

    .chat-top{
        height: calc(80% - 10px);
        width: 100%;
        border: 1px solid var(--el-menu-border-color);
        padding:10px 0;
        overflow-y: auto;
        display: flex;
        align-content: start;

        .chat-me{
            width: 100%;
            margin-bottom: 5px;
            display: flex;
            justify-content: flex-end;
        }
        .chat-me-div{
            background-color: #95f16d;
            margin-right: 16px;
            font-size: 14px;
        }
        .chat-ai{
            width: 100%;
            margin-bottom: 5px;
        }
        .chat-ai-mk{
            font-size: 14px;
            :deep(p){
                display: block;
                margin-block-start: 0em;
                margin-block-end: 0em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
            }
        }

        .chat-bubble {
            position: relative;
            max-width: 70%;
            padding: 10px;
            border-radius: 10px;
            word-wrap: break-word;
        }

        .chat-bubble.sent {
            background-color: #DCF8C6;
            color: #333;
            margin-left: 15px;
        }

        .chat-bubble.sent::after {
            content: "";
            position: absolute;
            top: 10px;
            left: -17px;
            border-width: 10px;
            border-style: solid;
            border-color: transparent #DCF8C6 transparent transparent;
        }

        .chat-bubble.received {
            background-color: #E5E5EA;
            color: #333;
        }

        .chat-bubble.received::after {
            content: "";
            position: absolute;
            top: 10px;
            right: -16px;
            border-width: 10px;
            border-style: solid;
            border-color: transparent transparent transparent #E5E5EA;
        }

    }

    .chat-bottom{
        margin-top: 10px;
        height: calc(20% - 5px);
        width: 100%;

        .chat-input{
            width: 100%;
            overflow-y: auto;
            outline: none;
            box-shadow: none;
            border: 1px solid var(--el-menu-border-color);
            padding: 10px;
        }
        .chat-tool{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .placeholder {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #999;
            pointer-events: none;
        }
    }

}
.hidden {
    display: none;
}
</style>